<template>
	<div class="app-wrapper" :class="[collapse ? 'hideSidebar' : 'openSidebar', device === 'mobile' ? 'mobile' : '', withoutAnimation ? 'withoutAnimation' : '']">
		<div v-if="device === 'mobile' && !collapse" class="drawer-bg" @click="handleClickOutside" />
		<div class="sidebar-container">
			<div class="sidebar-logo-container" :class="{ collapse: collapse }">
				<div v-if="collapse" class="sidebar-logo-link"><img src="/static/img/logo.png" class="sidebar-logo" /></div>
				<div v-else class="sidebar-logo-link">
					<img src="/static/img/logo.png" class="sidebar-logo" />
					<h1 class="sidebar-title">uniCloud-admin</h1>
				</div>
			</div>
			<el-scrollbar>
				<el-menu default-active="index" background-color="#393e46" text-color="#fff" active-text-color="#409EFF" :collapse="collapse">
					<el-menu-item @click="openPage(item)" v-if="!item.children" v-for="item in menus" :index="item.index" :key="item.index">
						<i :class="item.icon"></i>
						<span slot="title">{{ item.name }}</span>
					</el-menu-item>
					<el-submenu v-else :index="item.index" :key="item.index">
						<template slot="title">
							<i :class="item.icon"></i>
							<span slot="title">{{ item.name }}</span>
						</template>
						<el-menu-item @click="openPage(children)" v-for="children in item.children" :index="children.index" :key="children.index">
							<i :class="children.icon"></i>
							<span slot="title">{{ children.name }}</span>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-scrollbar>
		</div>
		<div class="main-container">
			<div class="fixed-header">
				<div class="header-box">
					<div class="hamburger-container" @click="toggleSidebar"><i :class="[collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"></i></div>
					<el-breadcrumb class="breadcrumb-container" separator="/">
					    <el-breadcrumb-item>{{ currentTitle }}</el-breadcrumb-item>
					</el-breadcrumb>
					<div class="right-menu">
						<div class="right-menu-item" @click="Utils.fullScreen"><i class="el-icon-full-screen"></i></div>
						<el-dropdown trigger="click" class="right-menu-item" @command="handleCommand">
							<span class="el-dropdown-link">
								{{ user.username }}
								<i class="el-icon-caret-bottom el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown"><el-dropdown-item command="logout">退出登录</el-dropdown-item></el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
			</div>
			<section class="app-main">
				<transition name="fade-transform" mode="out-in">
					<keep-alive>
						<Welcome v-if="currentPage === 'welcome'" />
						<Article v-if="currentPage === 'article'" />
						<User v-if="currentPage === 'user'" />
					</keep-alive>
				</transition>
			</section>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import Welcome from '../welcome/welcome';
import Article from '../article/article';
import User from '../user/user';
import ResizeMixin from '@/common/ResizeHandler.js';
export default {
	data() {
		return {
			currentPage: 'welcome',
			currentTitle: '系统首页',
			menus: [
				{
					name: '系统首页',
					index: 'welcome',
					icon: 'el-icon-s-home'
				},
				{
					name: '文章管理',
					index: 'content',
					icon: 'el-icon-document-copy',
					children: [
						{
							name: '文章列表',
							index: 'article'
						}
					]
				},
				{
					name: '系统管理',
					index: 'system',
					icon: 'el-icon-s-tools',
					children: [
						{
							name: '系统用户',
							index: 'user'
						}
					]
				}
			]
		};
	},
	mixins: [ResizeMixin],
	computed: {
		...mapState(['user', 'collapse', 'device', 'withoutAnimation'])
	},
	components: {
		Welcome,
		Article,
		User
	},
	onLoad() {
		if (!this.user._id) {
			uni.redirectTo({
				url: '../login/login'
			});
		}
	},
	methods: {
		openPage(item) {
			if (this.device === 'mobile') {
				this.$store.commit('closeSidebar', false);
			}
			this.currentPage = item.index;
			this.currentTitle = item.name;
		},

		toggleSidebar() {
			this.$store.commit('toggleSidebar');
		},

		handleClickOutside() {
			this.$store.commit('closeSidebar', false);
		},

		handleCommand(command) {
			switch (command) {
				case 'logout':
					this.$store.commit('logout');
					uni.redirectTo({
						url: '../../pages/login/login'
					});
					break;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.app-wrapper {
	position: relative;
	height: 100%;
	width: 100%;

	// 左菜单
	.sidebar-container {
		transition: width 0.28s;
		width: 235px !important;
		background-color: #393e46;
		height: 100%;
		position: fixed;
		font-size: 0;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1001;
		overflow: hidden;
		box-shadow: 2px 0 6px rgba(0, 0, 0, 0.25);

		.sidebar-logo-container {
			position: relative;
			width: 100%;
			height: 54px;
			line-height: 54px;
			background: #393e46;
			text-align: center;
			overflow: hidden;

			&.collapse {
				.sidebar-logo {
					margin-right: 0 !important;
				}
			}

			.sidebar-logo-link {
				height: 100%;
				width: 100%;

				.sidebar-logo {
					width: 32px;
					margin-right: 12px;
					display: inline-block;
					vertical-align: middle;
					margin-bottom: -2px;
				}

				.sidebar-title {
					display: inline-block;
					margin: 0;
					color: #fff;
					font-weight: 500;
					line-height: 50px;
					font-size: 19px;
					vertical-align: middle;

					span {
						font-size: 12px;
						letter-spacing: 1px;
					}
				}
			}
		}

		.horizontal-collapse-transition {
			transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
		}

		/deep/ .el-scrollbar {
			height: calc(100% - 50px);

			.el-scrollbar__wrap {
				overflow-x: hidden !important;

				.el-menu {
					border: none;
					height: 100%;
					width: 100% !important;
				}
			}

			.is-vertical {
				right: 0;
			}

			.is-horizontal {
				display: none;
			}
		}

		.is-active {
			background: #313131 !important;
		}
	}

	// 右内容
	.main-container {
		min-height: 100%;
		transition: margin-left 0.28s;
		margin-left: 235px;
		position: relative;

		.fixed-header {
			position: fixed;
			top: 0;
			right: 0;
			z-index: 9;
			width: calc(100% - 235px);
			transition: width 0.28s;
		}

		.header-box {
			height: 50px;
			overflow: hidden;
			position: relative;
			background: #fff;
			border-bottom: 1px solid #f1f1f1;

			.hamburger-container {
				line-height: 50px;
				height: 100%;
				float: left;
				cursor: pointer;
				font-size: 22px;
				padding: 0 15px;
				
				i {
					color: #5a5e66;
				}

				&:hover {
					background: rgba(0, 0, 0, 0.025);
				}
			}
			
			.breadcrumb-container{
				display: inline-block;
				float: left;
				font-size: 14px;
				line-height: 50px;
				margin-left: 8px;
			}

			.right-menu {
				float: right;
				height: 100%;
				line-height: 50px;
				margin-right: 10px;
				font-size: 18px;

				.right-menu-item {
					display: inline-block;
					padding: 0 15px;
					height: 100%;
					color: #5a5e66;
					cursor: pointer;
					vertical-align: text-bottom;
					
					i {
						font-weight: 600;
					}

					&:hover {
						background: rgba(0, 0, 0, 0.025);
					}
				}
			}
		}

		.app-main {
			min-height: calc(100vh - 50px);
			width: 100%;
			position: relative;
			overflow: hidden;
			background: #f8f8f8;
			font-size: 14px;
		}

		.fixed-header + .app-main {
			padding-top: 50px;
			overflow: auto;
		}
	}
}

// 隐藏菜单
.hideSidebar {
	.sidebar-container {
		width: 54px !important;

		/deep/ .el-tooltip,
		/deep/ .el-submenu__title {
			padding: 0 15px !important;
		}
	}

	.main-container {
		margin-left: 54px;

		.fixed-header {
			width: calc(100% - 54px);
		}
	}
}

// 移动端模式
.mobile {
	.sidebar-container {
		transition: transform 0.28s;
		width: 235px !important;
	}

	.drawer-bg {
		background: #000;
		opacity: 0.3;
		width: 100%;
		top: 0;
		height: 100%;
		position: absolute;
		z-index: 999;
	}

	.main-container {
		margin-left: 0;

		.fixed-header {
			width: 100%;
		}
	}

	&.hideSidebar {
		.sidebar-container {
			pointer-events: none;
			transition-duration: 0.3s;
			transform: translate3d(-235px, 0, 0);
		}
	}
}

// 无动画
.withoutAnimation {
	.main-container,
	.sidebar-container {
		transition: none;
	}
}

// fade-transform 动画
.fade-transform-leave-active,
.fade-transform-enter-active {
	transition: all 0.5s;
}

.fade-transform-enter {
	opacity: 0;
	transform: translateX(-30px);
}

.fade-transform-leave-to {
	opacity: 0;
	transform: translateX(30px);
}
</style>
